<template>
    <el-dialog :title="dialogName" :visible.sync="formVisible" @close='closeDialog'>
        <el-form ref="formRef" :model="formData" label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="formData.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="formData.age"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="selectedAddress">
                <el-select v-model="formData.selectedAddress" placeholder="请选择活动区域">
                    <el-option label="安徽" value="安徽"></el-option>
                    <el-option label="湖北" value="湖北"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                    <el-option label="上海" value="上海"></el-option>
                    <el-option label="重庆" value="重庆"></el-option>
                    <el-option label="西安" value="西安"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="QQ" prop="qq">
                <el-input v-model="formData.qq"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="Email">
                <el-input v-model="formData.Email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click='closeDialog'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>

export default {
    props:{
        // 6、至此，父组件某行数据已从tableData传入propData
        // 下一步需要将父组件传过来的回显数据显示在dialog表单上面
        //注意：type指定的是这个属性的类型  你指定的是对象  那么他的值就只能是个对象  你给的却是string  改一下 ok  对嘛  对象用{}
        propData:{
            default:{},
            type:Object
        },
        //属性 不能 直接绑定在页面上，绑定在页面的值应该在data里面
        dialogFormVisible:{
            default:()=>false,
            type:Boolean
        },
        dialogTitle:{
            default:()=>'',
            type:String
        },
        isCompile:{
            default:()=>false,
            type:Boolean
        },
    },
    data(){
        return {
          formVisible:false,//在这里声明的，你前面看到0601里面去了
          isRewrite:true,
          dialogName:'',
          formData:{
                name:'',
                sex:'',
                age:null,
                selectedAddress:'',
                qq:'',
                Email:''
          } 
        } 
    },
    mounted(){

    },
    watch:{
        // 7、监听器监听到propData变化，就回显到表单上面
        propData: {
            handler: function (newpropData,oldpropData) {
                this.formData={...newpropData};
            },
        },
        dialogFormVisible:{
            handler: function (newval,oldval) {
                debugger
                // 我下面加了判断，出现的现象：是点击编辑后再点击新增就不能置空
                this.formVisible=newval;
                //你在这里监听的是false的时候，其实可以不判断的，不管是打开、还是关闭弹出窗的时候，都重置。
                //当dialogFormVisible的值变化的时候，dialogTitle的属性可能还没有给dialogName赋值成功，
                //此时dialogName的值为上一次的值，dialogTitle的值为最新值,所以判断的时候用dialogTitle
                if(this.dialogTitle=='添加联系人'){
                    this.$refs.formRef.resetFields();
                }
            },
        },
        dialogTitle: {
            handler: function (newval,oldval) {
                //所谓的双向数据绑定是通过监听的方式，然后$emit=>update的方式来实现的
        //当 dialogFormVisible的handler执行的时候，dialogTitle的handler还没有执行完成，所以这个时候dialogName还没有被赋值
    // 你怎么知道他没有被执行？怎么判断？？，你可以在两个里面各打一个断点,来看先执行的哪个
    debugger
                
                this.dialogName=newval;
                //这里你好好想想是不是有问题，下面这行代码，刚传过来的标题，你又原封不动的抛出去，这个新值是哪里来的？你又抛到哪里去？父级来的啊
                // 是你说又要更新dialogTitle，不然怎么抛？抛什么？不抛怎么更新dialogTitle，不更新怎么与下一次传过来的新值做对比，起到属性变化，就被监听到的效果？
                // 传过来的是新的标题啊？那为什么要抛一下呢，你这里的数据本来就是从外层的父级传过来的新值，你再给 抛给父级？
                //昨天晚上不是你说的吗,要实现双向数据传递啊 不然监听的dialogTitle怎么更新？你不抛，还是双向数据传递么？

                // this.$emit('update:dialogTitle',newval)
            },
        },

    },
    //你目前的问题是，编辑的时候第一次，点击取消关闭窗口，再打开的时候表单没有重置，第二次是好的
    //原因：我估计是因为你监听的dialogFormVisible第一次的时候值没有变化导致监听不触发，watch监听是当值变化的时候，才触发回调
    //先debugger试一下
    methods: {
        onSubmit:function(){
            // 2、点击立即创建按钮，需要将对话框子组件dialog的formData数据
            // 传到父组件PersonInformation的tableData，
            // 怎么传？-->this.$emit('触发的事件名'，抛出的事件)
            this.$emit('newinformation',this.formData);
            // 清空表单,这里应该放到前面
            // this.$refs.formRef.resetFields();
            // 3、关闭对话框
            // this.dialogFormVisible=false;
            // this.$emit('update:dialogFormVisible',false)-->添加closeDialog()方法
            this.closeDialog();
        },
        onClose(){
            //dialogFormVisible变成属性后，就变成只读的，
            //要改变它的数据需要$emit=>update的方式修改他的值
            // this.$emit('update:dialogFormVisible',false)-->绑定closeDialog方法
        },
        closeDialog(){
            //这里抛是因为  我要改变外层的状态为false,你那个监听里面的本来就是父级刚刚传递过来的数据，
            // 注意：Events:close	Dialog 关闭的回调-->
            this.$emit('update:dialogFormVisible',false);
        }

    }
}
</script>
